<div class="da-list-wrap">
  <div class="da-content-banner">
    <d-breadcrumb>
      <d-breadcrumb-item><a routerLink="/">{{ 'basicdata.breadcrumb.home' | translate }}</a></d-breadcrumb-item>
      <d-breadcrumb-item>采购付款单</d-breadcrumb-item>
    </d-breadcrumb>
  </div>
  <div class="da-content-wrapper">
    <d-splitter orientation="vertical" disabledBarSize="1px" [splitBarSize]="splitBarSize" style="height: 100%"
      [showCollapseButton]="true">
      <d-splitter-pane minSize="50%" [size]="partDetailHeight">
        <div class="da-list-container">
          <div class="da-list-header">
            <div class="d-input">
              <div class="inputIn">
                <input dTextInput style="width: 180px;" [error]="false" placeholder="付款单号" name="付款单号"
                  [(ngModel)]="fifter.SettlementNum">
                <input dTextInput style="width: 180px;" [error]="false" placeholder="采购订单号" name="采购订单号"
                  [(ngModel)]="fifter.PurchaseOrderNum">
                <d-range-datepicker-pro name="付款日期" [placeholder]="['付款日期：起始','付款日期：截止']" [(ngModel)]="creatTime"
                  (ngModelChange)="creatTimeChange($event)"></d-range-datepicker-pro>
                <input dTextInput style="width: 180px;" [error]="false" placeholder="供应商编码/供应商名称"
                  [(ngModel)]="fifter.Supply">
                <d-select [placeholder]="'付款状态'" name='付款状态' [(ngModel)]="fifter.SettlementStatus" [options]="status"></d-select>
              </div>
              <div class="d-submit">
                <d-button id="primaryBtn" style="margin-left: 8px" (btnClick)="filter2()">
                  <i class="icon icon-filter-o me-2"></i>查询
                </d-button>
                <d-button bsStyle="common" (btnClick)="reset()"> <i class="icon icon-refresh me-2"></i>重置</d-button>
              </div>
            </div>
            <div class="btn-group">
              <div class="btn-left">
                <d-button bsstyle="primaryBtn" (click)="creat()"> <i class="icon icon-add me-2"></i>新增付款单</d-button>
                <d-button bsStyle="danger" (btnClick)="delete()"> <i class="icon icon-code-editor-close me-2"></i>删除
                </d-button>
                <!-- <d-button bsStyle="common" (btnClick)="launchReview()"><span class="me-2">提交审核</span></d-button> -->
                <!-- <d-button bsStyle="common" (btnClick)="ClosePurchaseOrder(true)"> <i
                    class="icon icon-solved me-2"></i>结案</d-button>
                <d-button bsStyle="common" (btnClick)="ClosePurchaseOrder(false)"> <i
                    class="icon icon-infomation me-2"></i>反结案</d-button> -->
                <d-button bsStyle="common" (btnClick)="download()"> <i class="icon icon-related me-2"></i>导出</d-button>
                <d-button bsStyle="common" (btnClick)="printSelected()">
                  <i class="icon icon-print me-2"></i>打印
                </d-button>
                <d-button bsStyle="common" (btnClick)="allLog()">操作日志</d-button>
              </div>
            </div>
          </div>
          <div class="list-content">
            <!-- <d-table-option-toggle
            style="margin-left: 12px"
            [toggleMode]="'modal'"
            [styleSetting]="styleSetting"
            [columnsData]="allColumns"
            [modalWidth]="'800px'"
            (colChanges)="onColsChanges($event)"
            (styleChanges)="onStyleChanges($event)"
          >
            <d-button bsStyle="primary" [bordered]="true" [autofocus]="true">弹窗配置</d-button>
          </d-table-option-toggle> -->
            <d-data-table [dataSource]="tableData" [lazy]="true" [scrollable]="true" [fixHeader]="true"
              [tableWidthConfig]="tableWidthConfig" [tableOverflowType]="'auto'" [scrollable]="true"
              (checkAllChange)="getCheckedRows();getCheckedRowsData() "
              (rowCheckChange)="getCheckedRows();getCheckedRowsData()" [resizeable]="true" [size]="styleSetting.size"
              [borderType]="styleSetting.borderType" [striped]="styleSetting.striped"
              [shadowType]="styleSetting.shadowType">
              <thead dTableHead [checkable]="true">
                <tr dTableRow>
                  <th dHeadCell [fixedLeft]="colOption.fixedLeft" [fixedRight]="colOption.fixedRight"
                    *ngFor="let colOption of dataTableOptions.columns">{{ colOption.header }}</th>
                </tr>
              </thead>
              <tbody dTableBody>
                <ng-template let-rowItem="rowItem" let-rowIndex="rowIndex" let-nestedIndex="nestedIndex">
                  <tr dTableRow (click)="showDetail(rowItem, rowIndex)"
                    [ngClass]="{'selected-row': rowIndex === selectedRowIndex}">
                    <td dTableCell [fixedLeft]="'0px'">
                      <d-checkbox [disabled]="false" [showAnimation]="true" [ngModelOptions]="{ standalone: true }"
                        [ngModel]="rowItem.$checked" dTooltip [halfchecked]="rowItem.$halfChecked"
                        [showGlowStyle]="false"
                        (ngModelChange)="onRowCheckChange($event, rowIndex, nestedIndex, rowItem)">
                      </d-checkbox>
                    </td>
                    <td dTableCell [rowItem]="rowItem" [fixedLeft]="'80px'">
                      <!-- <span><a class="devui-link ms-3"
                          (click)="clickCode(rowItem.settlementNum,'采购付款单审核',rowItem.approvalStatus)"
                          [class.disabled]="rowItem.approvalStatus == '待审核'">审核</a></span> -->
                      <span (click)="edit(rowItem.settlementId)"><a class="devui-link ms-3"
                          [class.disabled]="rowItem.approvalStatus == '审核通过' || rowItem.approvalStatus =='审核中'">编辑</a></span>
                      <span class="ms-3"><a class="devui-link-danger"
                          [class.disabled]="rowItem.approvalStatus == '审核通过' || rowItem.approvalStatus =='审核中'"
                          (click)="delete(rowItem.settlementId)">删除</a></span>
                    </td>
                    <td dTableCell [rowItem]="rowItem" [field]="'showType'" [fixedLeft]="'280px'">
                      <span dTooltip [content]="rowItem?.settlementNum">{{rowItem?.settlementNum}}</span>
                    </td>
                    <td dTableCell [rowItem]="rowItem" [field]="'showType'">
                      <span dTooltip
                        [content]="rowItem?.settlementDate | date:'yyyy-MM-dd'">{{rowItem?.settlementDate | date:'yyyy-MM-dd'}}</span>
                    </td>
                    <td dTableCell [rowItem]="rowItem" [field]="'showType'">
                      <span dTooltip [content]="rowItem?.purchaseOrderNum">{{rowItem?.purchaseOrderNum}}</span>
                    </td>
                    <td dTableCell [rowItem]="rowItem" [field]="'showType'">
                      <span dTooltip [content]="rowItem.supplyChineseName">{{rowItem?.supplyShortName}}</span>
                    </td>
                    <td dTableCell [rowItem]="rowItem" [field]="'showType'">
                      <span dTooltip [content]="rowItem.supplyChineseName">{{rowItem?.supplyChineseName}}</span>
                    </td>
                    <td dTableCell [rowItem]="rowItem" [field]="'showType'">
                      <span dTooltip [content]="rowItem.purchaseManName">{{rowItem?.purchaseManName}}</span>
                    </td>
                    <td dTableCell [rowItem]="rowItem" [field]="'showType'">
                      <span dTooltip [content]="rowItem.departmentName">{{rowItem.departmentName}}</span>
                    </td>
                    <td dTableCell [rowItem]="rowItem" [field]="'showType'">
                      <span dTooltip [content]="rowItem.settlementAmount">{{rowItem?.settlementAmount}}</span>
                    </td>
                    <td dTableCell [rowItem]="rowItem" [field]="'showType'">
                      <span dTooltip [content]="rowItem.settlementAmountNoTax">{{rowItem?.settlementAmountNoTax}}</span>
                    </td>
                    <td dTableCell [rowItem]="rowItem" [field]="'showType'">
                      <span dTooltip [content]="rowItem.taxAmount">{{rowItem?.taxAmount}}</span>
                    </td>
                    <td dTableCell [rowItem]="rowItem" [field]="'showType'">
                      <span>
                        <d-tag [tag]="rowItem?.settlementStatus" [labelStyle]="rowItem?.settlementStatus">
                        </d-tag>
                      </span>
                    </td>
                    <td dTableCell [rowItem]="rowItem" [field]="'showType'">
                      <span>
                        <d-tag [tag]="rowItem?.paymentStatus" [labelStyle]="rowItem?.paymentStatus">
                        </d-tag>
                      </span>
                    </td>
                    <td dTableCell [rowItem]="rowItem" [field]="'showType'">
                      <span>
                        <d-tag [tag]="rowItem?.isClosed | booleanToText: '已结案':'未结案'" [labelStyle]="rowItem?.isClosed">
                        </d-tag>
                      </span>
                    </td>
                    <td dTableCell [rowItem]="rowItem" [field]="'showType'">
                      <span dTooltip [content]="rowItem.remark">{{rowItem.remark}}</span>
                    </td>
                    <td dTableCell [rowItem]="rowItem" [field]="'showType'">
                      <span (click)="fujian(rowItem)"><a class="devui-link">附件</a></span>
                    </td>
                    <td dTableCell [rowItem]="rowItem" [field]="'showType'">
                      <span>{{rowItem.creator}}</span>
                    </td>
                    <td dTableCell [rowItem]="rowItem" [field]="'showType'">
                      <span>{{rowItem.createDate | date:"yyyy-MM-dd HH:mm:ss"}}</span>
                    </td>
                    <td dTableCell [rowItem]="rowItem" [field]="'showType'" [fixedRight]="'0'">
                      <span>
                        <d-tag [tag]="rowItem?.approvalStatus" [labelStyle]="rowItem?.approvalStatus"></d-tag>
                      </span>
                    </td>
                  </tr>
                </ng-template>
              </tbody>
            </d-data-table>
          </div>
          <div class="page-footer">
            <div>
              <p>已选 <span class="underline">{{checkedIds.length}}</span> 条
                <a (click)="cleared()" class="cleared">清空</a>
              </p>
            </div>
            <d-pagination [size]="'sm'" [canViewTotal]="true" [canChangePageSize]="true" [canJumpPage]="true"
              [maxItems]="5" [total]="this.pager.total" [pageSizeOptions]="this.pageSizeOptions"
              [(pageSize)]="fifter.PageSize" [(pageIndex)]="fifter.PageNumber"
              (pageIndexChange)="pageIndexChange($event)" (pageSizeChange)="pageSizeChange($event)">
            </d-pagination>
          </div>
        </div>
      </d-splitter-pane>
      <d-splitter-pane class="detailTable" style="overflow: hidden;" [collapsible]="true">
        <div class="da-list-container">
          <div class="list-content">
            <d-data-table [dataSource]="partDetail" [lazy]="true" [scrollable]="true" [fixHeader]="true"
              [tableWidthConfig]="tableWidthConfig2" [tableOverflowType]="'auto'" [scrollable]="true"
              [resizeable]="true">
              <thead dTableHead>
                <tr dTableRow>
                  <th dHeadCell *ngFor="let colOption of dataTableOptions2.columns">{{ colOption.header }}</th>
                </tr>
              </thead>
              <tbody dTableBody>
                <ng-template let-rowItem="rowItem" let-rowIndex="rowIndex">
                  <tr dTableRow>
                    <td dTableCell>
                      <span><a class="devui-link"
                          [class.disabled]="rowItem?.isSettled">编辑付款</a></span>
                      <span class="ms-3"><a class="devui-link"
                          (click)="viewSettlementDetail(rowItem)">查看详情</a></span>
                    </td>
                    <td dTableCell>
                      <span dTooltip [content]="rowItem.materialCode">{{rowItem.materialCode}}</span>
                    </td>
                    <td dTableCell>
                      <span dTooltip [content]="rowItem.materialName">{{rowItem.materialName}}</span>
                    </td>
                    <td dTableCell>
                      <span dTooltip [content]="rowItem.materialSpec">{{rowItem.materialSpec}}</span>
                    </td>
                    <td dTableCell>
                      <span dTooltip [content]="rowItem.materialUnit">{{rowItem.materialUnit}}</span>
                    </td>
                    <td dTableCell>
                      <span dTooltip [content]="rowItem.purchaseQuantity">{{rowItem.purchaseQuantity}}</span>
                    </td>
                    <td dTableCell>
                      <span dTooltip [content]="rowItem.receivedQuantity">{{rowItem.receivedQuantity}}</span>
                    </td>
                    <td dTableCell>
                      <span dTooltip [content]="rowItem.settlementQuantity">{{rowItem.settlementQuantity}}</span>
                    </td>
                    <td dTableCell>
                      <span dTooltip [content]="rowItem.unitPrice">{{rowItem.unitPrice}}</span>
                    </td>
                    <td dTableCell>
                      <span dTooltip [content]="rowItem.unitPriceWithTax">{{rowItem.unitPriceWithTax}}</span>
                    </td>
                    <td dTableCell>
                      <span dTooltip [content]="rowItem.taxRate">{{rowItem.taxRate}}%</span>
                    </td>
                    <td dTableCell>
                      <span dTooltip [content]="rowItem.settlementAmount">{{rowItem.settlementAmount}}</span>
                    </td>
                    <td dTableCell>
                      <span dTooltip [content]="rowItem.settlementAmountWithTax">{{rowItem.settlementAmountWithTax}}</span>
                    </td>
                    <td dTableCell>
                      <span dTooltip [content]="rowItem.taxAmount">{{rowItem.taxAmount}}</span>
                    </td>
                    <td dTableCell>
                      <span dTooltip [content]="rowItem.remark">{{rowItem.remark}}</span>
                    </td>
                  </tr>
                </ng-template>
              </tbody>
            </d-data-table>
          </div>
        </div>
      </d-splitter-pane>
    </d-splitter>

  </div>
</div>
<d-toast [value]="msgs" [life]="2000" [styleClass]="'custom-class'" [style]="{ left: '50%',top:'10px' }"></d-toast>
